<template>
    <z-paging ref="paging" v-model="list" @query="upCallback">
        <view class="container">
            <view v-for="(item, index) in list" :key="index" class="items">
                <view>
                    <text>还款编号：</text>
                    <text class="num">{{ item.code }}</text>
                </view>
                <view class="u-flex u-row-between">
                    <view class="num price">{{ Number(item.total).toFixed(2) }}</view>
                    <view class="type">{{ item.type }}</view>
                    <view class="num date">{{ item.date }}</view>
                </view>
                <view class="status green" v-if="item.status == 1">{{ item.statusName }}</view>
                <view class="status blue" v-if="item.status == 0">{{ item.statusName }}</view>
            </view>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const list = ref<Array<any>>([])
const billId = ref('')
const paging = ref<any>(null)

const upCallback = (pageNo: number) => {
    let param = {
        current: pageNo,
        billId: billId.value
    }
    uni.$u.$api.CreditApi.querySettlementBillFlowByBillId(param)
        .then((res: any) => {
            let mlist: Array<any> = []
            res.records.forEach((m: any) => {
                mlist.push({
                    code: m.id,
                    total: m.paidAmount,
                    type: m.payTypeName,
                    date: m.paidDate,
                    status: m.approvalStatus,
                    statusName: m.approvalStatusName
                })
            })
            paging.value?.complete(mlist)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}

onLoad((option: any) => {
    billId.value = JSON.parse(option.para).id //账单id
})
</script>

<style scoped lang="scss">
.container {
    padding: 20rpx;
    .items {
        position: relative;
        background-color: $uni-bg-color;
        margin-bottom: 20rpx;
        padding: 20rpx;
        border-radius: 10rpx;
        font-size: 28rpx;
        line-height: 60rpx;

        .type {
            font-size: 24rpx;
            color: #ed6f22;
        }

        .price {
            font-size: 26rpx;
        }

        .date {
            font-size: 28rpx;
            color: #999999;
        }

        .status {
            position: absolute;
            top: 10rpx;
            right: 10rpx;
            font-size: 28rpx;
            color: white;
            padding: 6rpx 12rpx;
            border-radius: 26rpx;
            line-height: 28rpx;
        }

        .green {
            background-color: #339933;
        }

        .blue {
            background-color: #0066ff;
        }
    }
}
</style>
